<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="http://vjs.zencdn.net/5.11.9/video-js.css" rel="stylesheet">

    <style>
        .video-box {
            height: 480px;
            width: 1300px;
        }

        .video-box .left {
            width: 854px;
            float: left;
        }

        .video-box .left .video {
            width: 100%;
            height: 100%;
        }

        /*↓弹出内容自己写，例如用bootstrap的modal*/
        .video-box .left .question {
            display: none;
            background: #f6f6f6 none repeat scroll 0 0;
            border: 5px solid #eee;
            padding: 0 10px;
            width: 200px;
            height: 200px;
            position: fixed;
            opacity: 1;
            z-index: 11000;
            left: 50%;
            margin-left: -400px;
            top: 150px
        }

        .video-box .right {
            height: 100%;
            float: left;
        }

        .video-box .right .right-menu {
            width: 50px;
            background: #333;
            height: 100%;
            float: right;
        }

        .video-box .right .right-menu ul {
            overflow: hidden;
            list-style: none;
            padding: 0;
        }

        .video-box .right .right-menu ul li {
            text-align: center;
            list-style: none;
            padding: 5px 0;
        }

        .video-box .right .right-menu ul li.open {
            background: #3e8bc2;
        }

        .video-box .right .right-menu ul li span {
            height: 10px;
            width: 16px;
            overflow: hidden;
        }

        .video-box .right .right-menu ul li a {
            display: block;
            font-size: 12px;
            color: #ffffff;
            text-decoration: none;
            width: 26px;
            height: auto;
            overflow: hidden;
            margin: 0 auto;
            margin-top: 5px;
        }

        .video-box .right .right-content {
            background: #ccc;
            margin: 0;
            width: 300px;
            height: 100%;
            display: none;
            margin-right: 50px;
        }

        .video-box .right .right-content .first {
            height: 100%;
            overflow: auto;
        }


    </style>
</head>
<body>
<!--<div style="height: 500px;width: 1200px;">-->
<div class="mainContainer">
    <div class="video-box">
        <div class="left">
            <div class="video">
                <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered">
                </video>
            </div>
            <div class="question">
                弹出框
            </div>
        </div>
        <div class="right">
            <div class="right-menu">
                <ul>
                    <li class="menu1">
                        <span>
                            <img src="http://resource.1k100.com/portal1/images/ycjy_tit.gif?v=20160803">
                        </span>
                        <a href="javascript:;"><span>课堂讲义</span></a>
                    </li>
                    <li class="menu2">
                        <span>
                            <img src="http://resource.1k100.com/portal1/images/ycjy_tit.gif?v=20160803">
                        </span>
                        <a href="javascript:;"><span>课堂笔记</span></a>
                    </li>
                    <li>
                        <span>
                            <img src="http://resource.1k100.com/portal1/images/ycjy_tit.gif?v=20160803">
                        </span>
                        <a href="javascript:;"><span>课堂提问</span></a>
                    </li>
                    <li>
                        <span>
                            <img src="http://resource.1k100.com/portal1/images/ycjy_tit.gif?v=20160803">
                        </span>
                        <a href="javascript:;"><span>帮助中心</span></a>
                    </li>
                </ul>
            </div>
            <div class="right-content">
                <div class="first">
                    <p>讲义</p>
                    <a href="" style="display: block;">aa</a>
                    <a href="" style="display: block;">aa</a>
                    <a href="" style="display: block;">aa</a>
                    <a href="" style="display: block;">aa</a>
                    <a href="" style="display: block;">aa</a>
                    <a href="" style="display: block;">aa</a>
                    <a href="" style="display: block;">aa</a>
                    <a href="" style="display: block;">aa</a>
                    <a href="" style="display: block;">aa</a>
                    <a href="" style="display: block;">aa</a>
                    <a href="" style="display: block;">aa</a>
                    <a href="" style="display: block;">aa</a>
                    <a href="" style="display: block;">aa</a>
                    <a href="" style="display: block;">aa</a><a href="" style="display: block;">aa</a>
                    <a href="" style="display: block;">aa</a>
                    <a href="" style="display: block;">aa</a>
                    <a href="" style="display: block;">aa</a>
                    <a href="" style="display: block;">aa</a>
                    <a href="" style="display: block;">aa</a>
                    <a href="" style="display: block;">aa</a>
                    <a href="" style="display: block;">aa</a>
                    <a href="" style="display: block;">aa</a>
                    <a href="" style="display: block;">aa</a>
                    <a href="" style="display: block;">aa</a>
                    <a href="" style="display: block;">aa</a>
                    <a href="" style="display: block;">aa</a>
                    <a href="" style="display: block;">aa</a>
                </div>
            </div>
        </div>
    </div>
</div>


<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://vjs.zencdn.net/5.11.9/video.js"></script>


<script>
    // 播放器
    videojs.addLanguage('zh-CN', {
        "Play": "播放",
        "Pause": "暂停",
        "Current Time": "当前时间",
        "Duration Time": "时长",
        "Remaining Time": "剩余时间",
        "Stream Type": "媒体流类型",
        "LIVE": "直播",
        "Loaded": "加载完毕",
        "Progress": "进度",
        "Fullscreen": "全屏",
        "Non-Fullscreen": "退出全屏",
        "Mute": "静音",
        "Unmute": "取消静音",
        "Playback Rate": "播放码率",
        "Subtitles": "字幕",
        "subtitles off": "字幕关闭",
        "Captions": "内嵌字幕",
        "captions off": "内嵌字幕关闭",
        "Chapters": "节目段落",
        "You aborted the media playback": "视频播放被终止",
        "A network error caused the media download to fail part-way.": "网络错误导致视频下载中途失败。",
        "The media could not be loaded, either because the server or network failed or because the format is not supported.": "视频因格式不支持或者服务器或网络的问题无法加载。",
        "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "由于视频文件损坏或是该视频使用了你的浏览器不支持的功能，播放终止。",
        "No compatible source was found for this media.": "无法找到此视频兼容的源。",
        "The media is encrypted and we do not have the keys to decrypt it.": "视频已加密，无法解密。"
    });

    // Player类实例
    var myPlayer = videojs('myVideo', {
        // 是否显示控制面板
        controls: true,
        // 是否自动播放
        autoplay: false,
        // 是否预加载
        preload: 'auto',
        // 预览图
        poster: 'http://vjs.zencdn.net/v/oceans.png',
        // 是否循环播放
        loop: false,
//        width: 1150,
//        height: 500,
        language: 'zh-CN'
    }, function () {
        //TODO: 视频尺寸不能改变，它是按照宽高比显示，所以有黑边，(设置合适的宽和高,然后不设置width和height属性）
        // TODO:最好按照16:9的格式制作视频，例如854:480
        myPlayer.src({type: 'video/mp4', src: 'http://play.68mtv.com:8080/play13/60963.mp4'});
    });

    $(document).on('click', '.menu1', function (e) {
        if ($(this).hasClass('open')) {
            $(this).removeClass('open');
            $('.right-content').hide('slow');
        } else {
            $(this).addClass('open');
            $('.right-content').show('slow');
        }
    });

    $(document).on('click', '.menu2', function (e) {
        if ($(this).hasClass('open')) {
            $(this).removeClass('open');
            $('.question').hide('normal');
        } else {
            $(this).addClass('open');
            $('.question').show('normal');
        }
    });
</script>

</body>
</html>